<template>
	<!-- 当前最热的列表 -->
	<!-- 
		这里放个坑，等以后来解决 
			现在这个火先用图片放着，等日后有时间
				用css写一个能动的火
					火火火火火火火火火火火火火火火火火火
														-->
	<view class="hot-list">
		<view class="hot-title">当前最热</view>
		<view class="hot-items">
			<view
				v-for="(item, index) in hotList"
				:key="index"
				class="hot-item"
				@click="getHot(item)"
			>
				<view
					class="list-icon"
					v-if="index === 0"
				>
					<image
						src="../../../static/imgs/search/fire.png"
						mode="aspectFit"
						style="width: 20px; height: 30px"
					></image>
				</view>
				<span class="hot-item-text">
					{{ item }}
				</span>
			</view>
		</view>
	</view>
</template>

<script>
import { getSearchHot } from '@/common/api/search.js';
export default {
	data() {
		return {
			hotList: [], // 最热列表，仅显示九个
			src: '../../../static/imgs/search/fire.png'
		};
	},
	methods: {
		getHot(index) {
			uni.navigateTo({
				url: `/pages/search-result-page/search-result-page?search=${index}`
			});
		},
		getHotList() {
			getSearchHot().then((res) => {
				this.hotList = res;
			});
		}
	},
	mounted() {
		this.getHotList();
	}
};
</script>

<style>
.hot-item {
	padding: 5px 10px;
	/* border: 1px solid #ccc; */
	/* border-bottom: 1px solid #ccc; */
	margin: 5px;
	font-size: 14px;
	height: 60rpx;
	display: flex;
	position: relative;
	align-items: center;
}

.hot-item::after {
	content: '';
	width: 100%;
	height: 1px;
	background-color: #eee;
	position: absolute;
	top: 100%;
}
.hot-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.hot-items {
	display: flex;
	flex-direction: column;
}
.list-icon {
	position: absolute;
}

.hot-item-text {
	margin-left: 80rpx;
	font-family: 'Source Han Sans SC Normal';
	font-weight: bold;
}
</style>
